<template>
  <div class="category">
    <!-- 主分类 -->
    <van-sidebar
      v-model="activeKey"
      :style="{flexShrink: 0}"
    >
      <van-sidebar-item
        v-for="category in categories"
        :key="category.id"
        :title="category.name"
        :to="`/category/sub/` + category.id"
      />
    </van-sidebar>
    <!-- 子分类 -->
    <router-view />
  </div>
</template>

<script>
import { getCategories } from '@/api/category'
export default {
  name: 'Category',
  data() {
    return {
      categories: [], // 分类
      activeKey: 0,
    }
  },
  created() {
    getCategories()
      .then(data => {
        this.categories = data.list.slice(1)
      })
  },
  methods: {
    handleCategoryChange(index) {
      console.log(index)
    },
  },
}
</script>

<style lang="less" scoped>
.category{
  display: flex;
}

</style>
